<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../css/htmleaf-demo.css">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <style type="text/css">
        .form-bg {
            padding: 2em 0;
        }

        .form-horizontal {
            background: #fff;
            padding-bottom: 40px;
            border-radius: 15px;
            text-align: center;
        }

        .form-horizontal .heading {
            display: block;
            font-size: 30px;
            font-weight: 700;
            padding: 35px 0;
            border-bottom: 1px solid #f0f0f0;
            margin-bottom: 30px;
        }

        .form-horizontal .form-group {
            padding: 0 40px;
            margin: 0 0 25px 0;
            position: relative;
        }

        .form-horizontal .form-control {
            background: #f0f0f0;
            border: none;
            border-radius: 20px;
            box-shadow: none;
            padding: 0 20px 0 45px;
            height: 40px;
            transition: all 0.3s ease 0s;
        }

        .form-horizontal .form-control:focus {
            background: #e0e0e0;
            box-shadow: none;
            outline: 0 none;
        }

        .form-horizontal .form-group i {
            position: absolute;
            top: 12px;
            left: 60px;
            font-size: 17px;
            color: #c8c8c8;
            transition: all 0.5s ease 0s;
        }

        .form-horizontal .form-control:focus + i {
            color: #00b4ef;
        }

        .form-horizontal .fa-question-circle {
            display: inline-block;
            position: absolute;
            top: 12px;
            right: 60px;
            font-size: 20px;
            color: #808080;
            transition: all 0.5s ease 0s;
        }

        .form-horizontal .fa-question-circle:hover {
            color: #000;
        }

        .form-horizontal .main-checkbox {
            float: left;
            width: 20px;
            height: 20px;
            background: #11a3fc;
            border-radius: 50%;
            position: relative;
            margin: 5px 0 0 5px;
            border: 1px solid #11a3fc;
        }

        .form-horizontal .main-checkbox label {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
        }

        .form-horizontal .main-checkbox label:after {
            content: "";
            width: 10px;
            height: 5px;
            position: absolute;
            top: 5px;
            left: 4px;
            border: 3px solid #fff;
            border-top: none;
            border-right: none;
            background: transparent;
            opacity: 0;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .form-horizontal .main-checkbox input[type=checkbox] {
            visibility: hidden;
        }

        .form-horizontal .main-checkbox input[type=checkbox]:checked + label:after {
            opacity: 1;
        }

        .form-horizontal .text {
            float: left;
            margin-left: 7px;
            line-height: 20px;
            padding-top: 5px;
            text-transform: capitalize;
        }

        .form-horizontal .btn {
            float: right;
            font-size: 14px;
            color: #fff;
            background: #00b4ef;
            border-radius: 30px;
            padding: 10px 25px;
            border: none;
            text-transform: capitalize;
            transition: all 0.5s ease 0s;
        }

        @media only screen and (max-width: 479px) {
            .form-horizontal .form-group {
                padding: 0 25px;
            }

            .form-horizontal .form-group i {
                left: 45px;
            }

            .form-horizontal .btn {
                padding: 10px 20px;
            }
        }

        .lab {
            font-size: 15px;
            display: block;
            margin-left: -200px;
            font-family: webdings;
        }
    </style>
</head>
<body>
<div class="htmleaf-container">
    <header class="htmleaf-header">
        <h1>就业信息管理系统</h1>
        <div class="htmleaf-links">
        </div>
    </header>
    <div class="demo form-bg" id="logFrom">
        <div class="container">
            <div class="row">
                <div class="col-md-offset-3 col-md-6">
                    <form class="form-horizontal">
                        <span class="heading">登录</span>
                        <label for="username" class="lab">账号</label>
                        <div class="form-group">
                            <input type="text" v-model="fromData.username" class="form-control" id="username"
                                   placeholder="账户" name="username"/>
                            <i class="fa fa-user"></i>
                        </div>

                        <label for="password" class="lab">密码</label>
                        <div class="form-group help">
                            <input type="password" v-model="fromData.password" class="form-control" id="password"
                                   placeholder="密码" name="password"/>
                            <i class="fa fa-key"></i>
                        </div>
                        <label for="identity" class="lab">身份</label>
                        <div class="form-group">
                            <select class="form-control" id="identity" @change="identityChange">
                                <option value="student">学生</option>
                                <option value="teacher">教师</option>
                                <option value="admin">管理员</option>
                            </select>
                            <i class="fa fa-lock"></i>
                        </div>
                        <div class="form-group">
                            <div class="main-checkbox">
                                <input type="checkbox" :checked="remember" value="None" id="checkbox1"
                                       :value="fromData.remember" @click="rem" name="check"/>
                                <label for="checkbox1"></label>
                            </div>
                            <span class="text">记住我</span>
                            <button type="button" class="btn btn-default" @click="login()">立刻登录</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var app = new Vue({
        el: "#logFrom",
        data: {
            identity: "student",
            fromData: {
                remember: "no",
            },
            remember: false
        },
        created() {
            this.getUR();
        },
        methods: {
            getUR: function () {
                let username = $.cookie("username");
                // console.log(username)
                // console.log(password)
            },
            login: function () {
                str = "?login"
                str += "&username=" + this.fromData.username;
                str += "&password=" + this.fromData.password;
                str += "&role=" + this.identity;
                axios.post("/login/" + str,{credentials:true}).then((res) => {
                    console.log(res)
                    if (res.data.flag) {
                        console.log(res.data.data)
                        console.log(res.data.data != null)
                        if (res.data.message == "登录成功(*^_^*)") {
                            this.$message.success(res.data.message)
                            location.href = "/pages/index.html";
                        } else {
                            this.$message.error(res.data.message)
                        }
                    }
                })
            },
            rem: function () {
                if (!this.remember) {
                    this.fromData.remember = "yes";
                } else {
                    this.fromData.remember = "no";
                }
                this.remember = !this.remember;
            },
            identityChange: function () {
                this.identity = $("#identity").val();
            }
        }
    })
</script>
